import React, { useState } from 'react'
import { Form, Select, Input, Button, Row, Col, DatePicker } from 'antd'
import { RightOutlined, DownOutlined } from '@ant-design/icons'
const { RangePicker } = DatePicker
const { Option } = Select
import { history } from 'umi'
export default (props: any) => {

    const { form, getList, searchParams } = props
    const [visable, setVisable] = useState(true)

    const searchFinish = (values: any) => {
        const rangeValue = values['range_expired_date'];
        values.range_expired_date = []
        if (rangeValue !== undefined) {
            values.range_expired_date = [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')];
        }
        values.enable === "" && (delete values.enable)
        values.is_own === "" && (delete values.is_own)
        values.is_auth === "" && (delete values.is_auth)
        getList({ ...values })
    }
    const toggleVisable = () => {
        setVisable(!visable)
    }
    return (
        <div style={{ border: "1px solid #f1f1f1", padding: "10px 20px 10px" }}>
            <div style={{ textAlign: "right" }}> {visable ? <DownOutlined onClick={toggleVisable} style={{ color: "#BEBEBE" }} />
                : <RightOutlined onClick={toggleVisable} style={{ color: "#BEBEBE" }} />}</div>
            <Form
                form={form}
                onFinish={searchFinish}
                initialValues={{
                    enable: "",
                    is_own: "",
                    is_auth: "",
                    industry_id: 0,
                    level_id: 0
                }}
                style={visable ? {} : { display: "none" }}
            >
                <Row gutter={8}>
                    <Col span={4}>
                        <Form.Item label="店铺名称" name="store_title">
                            <Input />

                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item name="industry_id" label="主营行业">
                            <Select>
                                <Option value={0}>全部</Option>
                                {
                                    searchParams.industryList.map((item: any, inx: number) => <Option value={item["id"]} key={inx}>{item["title"]}</Option>)
                                }
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item name="level_id" label="店铺等级">
                            <Select>
                                <Option value={0}>全部</Option>
                                {
                                    searchParams.levelList.map((item: any, inx: number) => <Option value={item["id"]} key={inx}>{item["title"]}</Option>)
                                }
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>

                <Row gutter={8}>
                    <Col span={4}>
                        <Form.Item label="店铺状态" name="enable">
                            <Select>
                                <Option value={""}>全部</Option>
                                <Option value={1}>正常</Option>
                                <Option value={0}>关闭</Option>
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item label="是否认证" name="is_auth" >
                            <Select>
                                <Option value={""}>全部</Option>
                                <Option value={1}>是</Option>
                                <Option value={0}>否</Option>
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item label="是否自营" name="is_own" >
                            <Select>
                                <Option value={""}>全部</Option>
                                <Option value={1}>是</Option>
                                <Option value={0}>否</Option>
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={8}>
                    <Col span={6}>
                        <Form.Item label="到期时间" name="range_expired_date">
                            <RangePicker />
                        </Form.Item>
                    </Col>
                </Row>


                <Row gutter={8}>
                    <Col span={6}>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" style={{ marginLeft: "69px" }}>查询</Button>
                            <Button style={{ margin: "0 6px" }} onClick={() => {
                                form.resetFields()
                            }}>重置</Button>
                            <Button type="primary" ghost onClick={() => {
                                window.open('http://127.0.0.1:8888/admin/member/export-excel')
                            }}>导出</Button>
                            <Button type="primary" style={{ margin: "0 6px" }} onClick={() => {
                                history.push('/store/list/add')
                            }}>添加</Button>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </div>
    )
}